<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2首页</title>
    <link rel="stylesheet" href="/css/index/index.css">
</head>

<body>


    <div class="content-body">
        <div class="header">
            <div class="header-left">
                <span>水质情况实时监测预警系统</span>
            </div>
            <div class="header-time">
                <span id="time"></span>
                <a href="/loginout" style="color:yellow; font-size:16px; text-decoration:none;">退出</a>
            </div>
        </div>

        <div class="content">
            <div class="content-con">
                <div class="left-body">
                    <div class="left-top public-bg">
                        <div class="public-title">重点水质量检测区</div>

                        <div class="top-body">
                            <div class="top-left">
                                <div class="top-left-title">
                                    <h6>注水量</h6>
                                    <span><b id="inputwater">1756</b>m3/h</span>
                                    <img src="/img/index/pictre.png" alt="">
                                </div>
                            </div>

                            <div class="top-right">
                                <div class="top-left-title">
                                    <h6>泄水量</h6>
                                    <span><b id="outputwater">3520</b>m3/h</span>
                                    <img src="/img/index/pictre.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="left-con public-bg">
                        <div class="public-title">水质量分布情况</div>
                        <div class="title-nav" id="leida"></div>
                    </div>

                    <div class="left-bottom public-bg">
                        <div class="public-title">企业污染排放情况</div>
                        <div class="title-nav" id="wuran"></div>
                    </div>
                </div>

                <div class="center-body">
                    <div class="map" id="map"></div>
                </div>

                <div class="right-body">
                    <div class="right-top public-bg">
                        <div class="public-title">水质污染TOP5</div>
                        <div class="title-nav">
                            <div class="top5-ul">
                                <ul>
                                    <li>
                                        <span>1</span>
                                        <span>严重</span>
                                        <span>北京市</span>
                                        <span>房山区</span>
                                        <span>重度污染</span>
                                        <span>15公里</span>
                                    </li>
                                    <li>
                                        <span>2</span>
                                        <span>严重</span>
                                        <span>上海市</span>
                                        <span>闵行区</span>
                                        <span>重度污染</span>
                                        <span>10公里</span>
                                    </li>
                                    <li>
                                        <span>3</span>
                                        <span>严重</span>
                                        <span>北京市</span>
                                        <span>朝阳区</span>
                                        <span>重度污染</span>
                                        <span>9.3公里</span>
                                    </li>
                                    <li>
                                        <span>4</span>
                                        <span>中度</span>
                                        <span>广东省</span>
                                        <span>广州市</span>
                                        <span>中度污染</span>
                                        <span>8.6公里</span>
                                    </li>
                                    <li>
                                        <span>5</span>
                                        <span>中度</span>
                                        <span>浙江省</span>
                                        <span>杭州市</span>
                                        <span>中度污染</span>
                                        <span>6.6公里</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="right-con public-bg">
                        <div class="public-title">水质类别占比</div>
                        <div class="title-nav" id="huaxing"></div>
                    </div>

                    <div class="right-bottom public-bg">
                        <div class="public-title">主要地区水流量</div>
                        <div class="title-nav" id="zhexian"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- -->
</body>

</html>

<script src="/js/index/echarts.min.js"></script>
<script src="/js/index/jquery-3.7.1.js"></script>
<script type="text/javascript" src="/js/index/china.js"></script>
<script type="text/javascript" src="/js/index/index.js"></script>
<script src="/js/index/crypto-js.js"></script>


<script>
    //顶部时间
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = myYear + '年' + fillZero(myMonth) + '月' + fillZero(myToday) + '日' + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };

    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }
    //大屏
    setInterval(getTime, 1000);




    // 动态数据--注水量
    function getWaterData() {
        $.ajax({
            url: "/getWaterData",
            method: "get",
            success: function (res) {
                $('#inputwater').text(res.data.inputData);
                $('#outputwater').text(res.data.outputData);
            },
            
            error: function (err) {
                console.log(err);
            }
        })
    }
    setInterval(getWaterData, 1000);







    // 动态数据--污染
    var myChart = echarts.init(document.getElementById('wuran'));

    function getWuranData() {
        $.ajax({
            url: "/getWuranData",
            method: "get",
            success: function (res) {
                myChart.setOption(res.data);
            },
            error: function (err) {
                console.log(err);
            }
        })
    }
    setInterval(getWuranData, 1000);






</script>